<template>
  <li class="item">
    <router-link :to ="`/playlist/${item.id}`">{{item.name}}</router-link>
    <span class="art">{{item.al.name}} - {{item.ar[0].name}}</span>
    <span class="playbtn" @click="play(item) "></span>
  </li>
</template>

<script>
export default {
  name: "Sglist",
  props:['item'],
  methods:{
    play(item){
      // this.$emit('play',item.id)//组件传值的方式 触发父组件的play 并传递音乐ID
      //换一种方式 把播放音乐相关的数据存储  在Vue实例里面
      //在子组件通过 this.$root.musicStore 访问Vue实例里面的数据
      // console.log(this.$root.musicStore);
      this.$root.musicStore.musicID=item.id;
      this.$root.musicStore.currentMusic=item;
      console.log(item);
      // this.$root.musicStore.musicList.unshift(item);//把当前歌曲放在播放列表开头  末尾是push
      let newArr=this.$root.musicStore.musicList
      let find=false;
      for(let n of newArr){
        if(n.id==item.id){
          find=true;
        }
      }
      if(!find)  this.$root.musicStore.musicList.push(item);//当前音乐在播放列表里不存在加入列表
      //把当前歌曲列表全部加入播放歌单列表
      this.$emit('add-list')

    },

  }
}

</script>
<style lang="less" scoped>
li.item{
  display:flex;
  flex-direction:column;
  padding: 6px 10px;
  position: relative;
  .art{
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    color: #888;
    padding-top: 6px;
    padding-bottom: 6px;

  }
  &>a{
    text-decoration: none;
    color: #333;
    font-size: 17px;
    line-height: 24px;

  }
  .playbtn{
    background: url(../assets/index_icon.png) no-repeat -24px 0px;
    width: 22px;
    height: 22px;
    background-size: 166px 97px;
    padding-right: 5px;
    position: absolute;
    right: 10px;
    bottom: 20px;

  }

}
</style>